<script setup lang="ts">
	import { ref, onMounted, computed, nextTick } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
  import { message } from "@/utils/message";
  import {
    categorySelectApi
  } from "@/api/quotedPriceApi";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });

  onMounted(async()=> {
    getCategory()
  })
  const getCategory = async() => {
    const res: any = await categorySelectApi({
      type: newFormInline.value.type || 1
    })
    newFormInline.value.categoryList = res?.result
  }
  const categoryCascader = computed(()=> ({
    checkStrictly: true,
    checkOnClickNode: true,
    checkOnClickLeaf: false,
    value: 'categoryId',
    label: 'name',
  }))
  const handleVisibleChange = async () => {
    await nextTick();
    document.querySelectorAll('.el-cascader-node__label').forEach((el: any) => {
      el.onclick = () => el.previousElementSibling?.click();
    });
  };
  const typeChange = (val) => {
    getCategory()
  }
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="类型" prop="type">
          <el-select v-model="newFormInline.type" clearable placeholder="请选择" @change="typeChange" class="!w-[100px]">
          	<el-option :value="item.id" :label="item.name" v-for="item in newFormInline.categoryOption" :key="item.id"></el-option>
          </el-select>
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="父分类" prop="parentId">
          <!-- <el-input v-model="newFormInline.parentId" clearable placeholder="请输入" /> -->
          <el-cascader v-model="newFormInline.parentId" class="w-full" :options="newFormInline.categoryList" :props="categoryCascader" clearable @visible-change="handleVisibleChange"/>
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="newFormInline.categoryName" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="排序" prop="sort">
          <el-input-number
          	v-model="newFormInline.sort"
          	class="!w-full"
          	:min="1"
          	:max="9999"
          	controls-position="right"
            />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="状态" prop="status">
          <el-radio-group v-model="newFormInline.status">
            <el-radio :label="1">启动</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
      	</el-form-item>
      </re-col>
    </el-row>
	</el-form>
</template>
<style scoped>
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 1px 11px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
</style>
